<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
        <!-- 1.大小屏幕自动适应,扩大缩小浏览器 -->
        <!-- 2.滚动数字区点击左右切换图片 -->
        <!-- 3.左右区域点击切换 -->
        <!-- 4.默认5秒钟自动切换下一张 -->
        <!-- 5.最后一张,回到第一张 -->

     <div id="myCarousel" class="carousel slide" data-ride="carousel">

         <!-- 1.滚动圆点区 -->
         <ol class="carousel-indicators">
             <li data-slide-to="0" data-target="#myCarousel"></li>
             <li data-slide-to="1" data-target="#myCarousel"></li>
             <li data-slide-to="2" data-target="#myCarousel"></li>
         </ol>

         <!-- 2.图片区 -->
         <div class="carousel-inner">
             <div class="item active">
                 <img src="img/1.jpg">
             </div>
             <div class="item">
                 <img src="img/2.jpg">
             </div>
             <div class="item">
                 <img src="img/3.jpg">
             </div>
         </div>

         <!-- 3.左右切换 -->
         <a href="#myCarousel" data-slide="prev" class="carousel-control left">
                <span class="glyphicon glyphicon-chevron-left"></span>
         </a>
         <a href="#myCarousel" data-slide="next" class="carousel-control right">
                <span class="glyphicon glyphicon-chevron-right"></span>
         </a>

     </div>

     <!-- 1. data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置； -->
     <!-- 2. data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to="2" 将把滑动块移动到一个特
             定的索引，索引从 0 开始计数。 -->
     <!-- 3. data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放 -->
</body>
</html>